<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head th:replace="index::head"></head>

<body>
<section th:replace="index::#hero"></section>

<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center fixed-top ">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-center justify-content-lg-start">
        <i class="bi bi-phone d-flex align-items-center"><span>+1 5589 55488 55</span></i>
        <i class="bi bi-clock ms-4 d-none d-lg-flex align-items-center"><span>Mon-Sat: 11:00 AM - 23:00 PM</span></i>
    </div>
</section>

<!-- ======= Header ======= -->
<header th:replace="index::#header"></header><!-- End Header -->

<main id="main">

    <section id="specials" class="specials">
        <div class="container">

            <div class="section-title">
                <h2>Check our <span>Specials</span></h2>
            </div>

            <div class="row">
                <div class="col-lg-3">
                    <ul class="nav nav-tabs flex-column" v-for="f in foods">
                        <li class="nav-item">
                            <a class="nav-link active show" data-bs-toggle="tab" href="#tab-1" v-on:click="get(f.fid)">{{f.fname}}</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9 mt-4 mt-lg-0" id = "app">
                    <div class="tab-content">
                        <div class="tab-pane active show" id="tab-1">
                            <div class="row">
                                <div class="col-lg-8 details order-2 order-lg-1">
                                    <h3>特色菜品描述</h3>
                                    <p>{{food.fdesc}}</p>
                                </div>
                                <div class="col-lg-4 text-center order-1 order-lg-2">
                                    <img :src="`../assets/img/${food.image}`" alt="" class="img-fluid" style="height: 300px;width: 400px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section><!-- End Breadcrumbs Section -->

</main><!-- End #main -->

<!-- ======= Footer ======= -->
<footer th:replace="index::#footer"></footer><!-- End Footer -->

<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>

<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
<script>
    var v = new Vue({
        el:"#specials",
        data:{
            foods:[],
            food:{}
        },
        mounted:function () {
            axios.get("menu/special").then(res=>{
                this.foods = res.data.data;
                this.food = this.foods[0];
            })
            console.log(this.food);
            console.log(this.foods);
        },
        methods:{
            get(id){
                console.log(id);
                axios.get("menu/special/"+id).then(res=>{
                    console.log(res.data.data);
                    this.food = res.data.data;
                })
            }
        }
    })
</script>

</body>

</html>
